<?php
include ('../../datos/general.php');
include ('../../datos/conexion.php');
include ('../../datos/storeprocedure.php');
validarSession('Admin');
$conn=obtenerConexion();
?>
	<script>
	var idEscuela='';
	$(function() {
		$( "#accordion" ).accordion({
			autoHeight: false,
			navigation: true
		});
	});

	function cargarSedes(){
		<?php 
			$arreglo = obtenerSede();
			$flag = true;
			foreach($arreglo AS $row){
					$flag=false;
					$respuesta .= '<input type="checkbox" name="sedes" id="'.$row['idSede'].'" value="'.$row['nombreSede'].'"> '.$row['nombreSede'].'<br>';
				}
			if($flag)
				$respuesta .= 'No hay sedes registradas';
		?>
				document.getElementsByName("respuestaCargarSedes")[0].innerHTML='<?php echo $respuesta; ?>';
		}
	
	function registrarEscuela(){
			var nombreEscuela=document.getElementById("campoNombreEscuela");
			var nodoPadre = document.getElementsByName("sedes");
			var idSedes="";
			for(var i=0; i<nodoPadre.length; i++){
				if(nodoPadre[i].checked)
					idSedes+=nodoPadre[i].id+" ";
				}
			if(idSedes!="" && nombreEscuela.value!=""){
				idSedes = idSedes.substring(0, idSedes.length-1);
				parametros="tipo="+encodeURIComponent("registrar")+"&nombreEscuela="+encodeURIComponent(nombreEscuela.value)+
						   "&idSedes="+encodeURIComponent(idSedes);
				cargar ("respuestaRegistroEscuela", "", "Admin/escuelas/escuelaFunciones.php", "POST", parametros, true, "");
			}
			else {
				document.getElementById("respuestaRegistroEscuela").innerHTML="Hay datos sin completar";
				}
		}

	function limpiarCampos(lugar){
			var nodoPadre = document.getElementsByName("sedes");
			var idSedes="";
			document.getElementById("campoNombreEscuela").value="";
			if(lugar!="bd")
				document.getElementById("respuestaRegistroEscuela").innerHTML="";
			for(var i=0; i<nodoPadre.length; i++){
				if(nodoPadre[i].checked)
					nodoPadre[i].checked=false;
				}
		}
	
	function mostrarTabla(){
			$(".flexme3").flexigrid({
				url : 'Admin/escuelas/escuelaCargarTabla.php',
				dataType : 'xml',
				colModel : [{ display : 'Nombre', name : 'nombreEscuela', width : 160, sortable : true, align : 'left', process: onCellClick}, 
							{ display : 'Sede', name : 'nombreSede', width : 160, sortable : true, align : 'left', process: onCellClick}, 
							{display : 'Coordinador', name : 'coordinador', width : 300, sortable : true, align : 'left', process: onCellClick}],
				searchitems : [	{display : 'Coordinador', name : 'coordinador'},
								{display : 'Nombre', name : 'nombreEscuela'}, 
								{display : 'Sede', name : 'nombreSede'}],
				buttons : [ {name : 'Editar', bclass : 'edit',onpress : editar}],
				sortname : "nombreEscuela",
				sortorder : "asc",
				usepager : true,
				title : 'Escuelas registradas',
				useRp : true,
				rp : 10,
				showTableToggleBtn : true,
				width : 620,
				height : 220,
				singleSelect: true
			});
		}
	
	function onCellClick(celDiv,id,grid){
		$(celDiv).click(function (){ocultarDiv();});
		}
	
	function editar(com, grid){
		var items = $('.trSelected', grid);
			if(items.length>0){
				idEscuela= items[0].id.substr(3);
				nombreEscuela= $('td[abbr="nombreEscuela"] >div', items).html();
				$("#divEditar").show("slow");
				document.getElementById("editarNombreEscuela").value=nombreEscuela;
				document.getElementById("editarEscuelaRespuesta").innerHTML="";
				document.getElementById("editarNombreEscuela").focus();
				document.location="#moverFinal";
			}
			else alert('Debe seleccionar un registro.');
		}
	
	function cargarEditarSedes(flag){
		if(flag){
			$("#editarCargarSede").show("slow");
			$("#editarCampoSede").show("slow");
			parametros="tipo="+encodeURIComponent("cargarEditarSedes")+"&idEscuela="+encodeURIComponent(idEscuela);
			cargar ("editarCargarSede", "", "Admin/escuelas/escuelaFunciones.php", "POST", parametros, true, "");
			}
		else {
			$("#editarCampoSede").hide("slow");			
			$("#editarCargarSede").hide("slow");
			}
		}
	
	function editarEscuela(){
		nombreEscuela = document.getElementById("editarNombreEscuela").value;
		agregarSede= document.getElementById("agregarSedes").checked;
		if(agregarSede){
			var nodoPadre = document.getElementsByName("editarSedes");
			var idSedes="";
			for(var i=0; i<nodoPadre.length; i++){
				if(nodoPadre[i].checked)
					idSedes+=nodoPadre[i].id+" ";
				}
			idSedes = idSedes.substring(0, idSedes.length-1);
			if(idSedes.length>0 && nombreEscuela!=''){
				parametros="tipo="+encodeURIComponent("editarEscuelaConSede")+"&idEscuela="+encodeURIComponent(idEscuela)+
						   "&nombreEscuela="+encodeURIComponent(nombreEscuela)+"&idSedes="+encodeURIComponent(idSedes);
				cargar ("editarEscuelaRespuesta", "", "Admin/escuelas/escuelaFunciones.php", "POST", parametros, true, "");
			}
			}
		else if(nombreEscuela!=''){
			parametros="tipo="+encodeURIComponent("editarEscuela")+"&idEscuela="+encodeURIComponent(idEscuela)+
			   "&nombreEscuela="+encodeURIComponent(nombreEscuela);
			cargar ("editarEscuelaRespuesta", "", "Admin/escuelas/escuelaFunciones.php", "POST", parametros, true, "");
			}
		}
	
	function ocultarDiv(){
		document.getElementById('agregarSedes').checked=false;
		document.getElementById('editarCargarSede').innerHTML='';
		$("#divEditar").hide("slow");
		$("#editarCampoSede").hide("slow");
		}	
	</script>

<table id="tablaContenedora">
	<tr>
    	<td  align="center">
        	<div class="demo">
				<div id="accordion">
                	<!--Visualizar Sedes-->
                	<h3>
                    	<a href="#" onclick="$('.flexme3').flexReload();">
                        	Ver escuelas
                        </a>
                    </h3>
	                    <!-- Cargas lista de escuelas en la tabla-->   
                        <div id="listaEscuela" align="left">	
                        <table class="flexme3" style="display: none"></table>
                        <script>mostrarTabla();</script>
                        <div id="divEditar" style="-moz-border-radius: 10px;-webkit-border-radius: 10px; border: 1px solid #000000; display:none" >
                        	<h3 align="center">Edite información de la escuela</h3>
                        	<table id="tablaEditar" align="center">
                            	<tr>
                                	<td align="right"><strong>Nombre:</strong></td>
                                    <td>
                                    	<input type="text" id="editarNombreEscuela" />
                                    </td>
                                </tr>
                                <tr>
                                	<td colspan="2">Asociar sede a la escuela:
                                    				<input type="checkbox" id="agregarSedes"  onchange="cargarEditarSedes(this.checked);" >
                                    </td>
                                </tr>
                            	<tr>
                                	<td align="right"><div id="editarCampoSede" style="display:none"><strong>Sede:</strong></div></td>
                                    <td><div id="editarCargarSede"></div>
                                    </td>
                                </tr>
                            	<tr>
                                	<td colspan="2" align="right">
                                    	<button onclick="ocultarDiv()">Ocultar</button>
                                        <button id="editarBoton" onclick="editarEscuela()">Guardar cambios</button>
                                    </td>
                                </tr>
                                <tr>
                                	<td colspan="2" align="right"><label style="color:#F00" id="editarEscuelaRespuesta"></label></td>
                                </tr>
                                <tr align="right">
                                	<td>
                                    </td>
                                </tr>                                                
                            </table>
                        </div>                    
                        </div> <!-- Div listaEscuelas-->
                    <!--Registrar nueva escuela-->
					<h3>
                    	<a href="#" onclick="limpiarCampos('');cargarSedes()">
							Registrar nueva escuela
                        </a>
					</h3>
						<div id="registroEscuela">
                        	<table>
                            	<tr>
                                	<td align="right">
                                    	Nombre de escuela:
                                    </td>
                                    <td style="color:#F00">
                                    	<input type="text" id="campoNombreEscuela"/>
                                    </td>
                                    <td style="color:#F00; vertical-align:top" align="left">*</td>
                                </tr>
                            	<tr>
                                	<td align="right">
                                    	Sedes donde se <br />estará esta escuela:
                                    </td>
                                	<td name="respuestaCargarSedes">
                                    </td>
                                    <td style="color:#F00; vertical-align:top" align="left">*</td>
                                </tr>
                                <tr align="right">
                                	<td colspan="2">
	                                    <button onclick="registrarEscuela();">Registrar</button>
                                    </td>
                                </tr>   
                                <tr align="right">
                                	<td colspan="2" id="respuestaRegistroEscuela" style="color:#F00">
                                    </td>
                                </tr>                                                            
                            </table>
						</div><!-- Div registroEscuela-->
				</div><!-- Div acordion -->
			</div><!-- Div demo -->
		</td><!-- columna contenedora -->
	</tr><!-- fila contenedora -->
</table><!-- Tabla contenedora -->